import { useEffect, useRef } from 'react';
import hljs from 'highlight.js';
import copyText from 'copy-to-clipboard';
import {message} from 'antd';
import './index.less';

const HighLight: React.FC = ({children})=>{
  const container = useRef<HTMLDivElement>(null);

  useEffect(()=>{
    container.current!.querySelectorAll('pre code').forEach((el) => {
      hljs.highlightElement(el as HTMLElement);
      const copy = document.createElement('span');
      copy.innerText = 'copy';
      copy.className = 'copy';
      copy.onclick = ()=>{
        copyText((el as HTMLElement).innerText);
        message.success('复制成功');
      }
      el.parentNode!.appendChild(copy);
    });
  }, [children]);

  return <div ref={container} className="markdown">
    {children}
  </div>
}

export default HighLight;
